import { StyleSheet, Dimensions } from 'react-native';

export const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    content: {
        flex: 1,
        padding: 10,
    },
    searchContainer: {
        marginBottom: 7,
    },
    searchWrapper: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#fff',
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#e0e0e0',
    },
    searchInput: {
        flex: 1,
        paddingHorizontal: 16,
        paddingVertical: 12,
        fontSize: 16,
        backgroundColor: 'transparent',
    },
    listContainer: {
        paddingBottom: 20,
    },
    card: {
        backgroundColor: '#fff',
        borderRadius: 8,
        padding: 16,
        marginBottom: 12,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.1,
        shadowRadius: 3.84,
        elevation: 5,
        position: 'relative',
    },
    cardHeader: {
        marginBottom: 12,
    },
    headerRow: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 8,
    },
    cardContent: {
        marginBottom: 12,
    },
    label: {
        fontSize: 14,
        color: '#666',
        marginRight: 8,
        minWidth: 60,
    },
    value: {
        fontSize: 14,
        color: '#333',
        flex: 1,
        fontWeight: '500',
    },
    bodyItem: {
        backgroundColor: '#f8f9fa',
        borderRadius: 6,
        padding: 12,
        marginBottom: 8,
    },
    bodyItemHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    bodyItemLeft: {
        flexDirection: 'row',
        flex: 1,
    },
    imagePlaceholder: {
        width: 60,
        height: 60,
        backgroundColor: '#e0e0e0',
        borderRadius: 6,
        marginRight: 12,
    },
    productImage: {
        width: 60,
        height: 60,
        borderRadius: 6,
        marginRight: 12,
        backgroundColor: '#f0f0f0',
    },
    bodyItemInfo: {
        flex: 1,
    },
    bodyItemLabel: {
        fontSize: 12,
        color: '#666',
        marginBottom: 2,
    },
    bodyItemValue: {
        fontSize: 12,
        color: '#333',
        marginBottom: 2,
        fontWeight: '500',
    },

    expandedDetails: {
        marginTop: 12,
        paddingTop: 12,
        borderTopWidth: 1,
        borderTopColor: '#eee',
    },
    detailsContent: {
        flex: 1,
    },
    detailRow: {
        flexDirection: 'row',
        marginBottom: 4,
    },
    detailLabel: {
        fontSize: 12,
        color: '#666',
        minWidth: 60,
    },
    detailValue: {
        fontSize: 12,
        color: '#333',
        flex: 1,
    },

    expandButton: {
        alignSelf: 'center',
        paddingVertical: 8,
        paddingHorizontal: 16,
        marginTop: 8,
    },
    expandButtonText: {
        color: '#0076ff',
        fontSize: 14,
        fontWeight: '500',
    },
    bottomActions: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        marginTop: 12,
        paddingTop: 12,
        borderTopWidth: 1,
        borderTopColor: '#eee',
    },
    loadingContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    loadingText: {
        fontSize: 16,
        color: '#666',
    },
    emptyContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 20,
    },
    emptyImage: {
        width: 200,
        height: 200,
        marginBottom: 16,
    },
    emptyText: {
        fontSize: 16,
        color: '#999',
        textAlign: 'center',
    },
    loadingMoreContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingVertical: 15,
    },
    loadingMoreText: {
        marginLeft: 8,
        fontSize: 14,
        color: '#666',
    },
    imageModalContainer: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.9)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    imageModalOverlay: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: '100%',
    },
    fullScreenImage: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
    },
    pickerModalCard: {
        backgroundColor: '#fff',
        borderRadius: 12,
        width: 320,
        maxHeight: 340,
        paddingVertical: 4,
        shadowColor: '#000',
        shadowOpacity: 0.08,
        shadowRadius: 8,
        shadowOffset: { width: 0, height: 2 },
        elevation: 8,
    },
    pickerOption: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 14,
        paddingHorizontal: 20,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
        backgroundColor: '#fff',
    },
    pickerOptionSelected: {
        backgroundColor: '#f0f6ff',
    },
    modalButtonRow: {
        flexDirection: 'row',
        marginTop: 8,
        marginBottom: -8,
        marginHorizontal: -24,
    },
    modalButton: {
        flex: 1,
        height: 44,
        borderRadius: 0,
        justifyContent: 'center',
        alignItems: 'center',
    },
    modalButtonCancel: {
        backgroundColor: '#fff',
        borderBottomLeftRadius: 8,
        borderRightWidth: 1,
        borderRightColor: '#f0f0f0',
    },
    modalButtonConfirm: {
        backgroundColor: '#007AFF',
        borderBottomRightRadius: 8,
    },
    modalButtonCancelText: {
        color: '#333',
        fontSize: 16,
        fontWeight: '500',
    },
    modalButtonConfirmText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: '500',
    },
    pickerMask: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.2)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    // 新增弹窗样式，参考DeviceRepairReport
    modalOverlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'flex-end',
    },
    modalContent: {
        backgroundColor: '#fff',
        padding: 20,
        width: '100%',
        height: '87%',
        position: 'absolute',
        bottom: 0,
    },
    modalTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#333',
        textAlign: 'center',
        marginBottom: 20,
    },
    modalSearchWrapper: {
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomWidth: 1,
        borderBottomColor: '#007AFF',
        marginBottom: 20,
    },
    scanInput: {
        flex: 1,
        paddingBottom: 8,
        fontSize: 16,
        color: '#333',
    },
    levelContainer: {
        marginBottom: 20,
        position: 'relative',
    },
    levelLabel: {
        fontSize: 16,
        color: '#333',
        marginBottom: 8,
    },
    levelSelector: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 12,
        paddingHorizontal: 15,
        borderWidth: 1,
        borderColor: '#ddd',
        borderRadius: 8,
    },
    levelText: {
        fontSize: 16,
        color: '#333',
    },
    levelArrowIcon: {
        fontSize: 16,
        color: '#999',
        marginLeft: 8,
    },
    modalLevelDropdown: {
        position: 'absolute',
        top: 77,
        left: 0,
        right: 0,
        backgroundColor: '#fff',
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#ddd',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.15,
        shadowRadius: 6,
        elevation: 4,
        zIndex: 1000,
    },
    modalLevelOption: {
        paddingVertical: 12,
        paddingHorizontal: 15,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
    },
    modalLevelOptionText: {
        fontSize: 16,
        color: '#333',
    },
    faultContainer: {
        marginBottom: 20,
    },
    faultLabel: {
        fontSize: 16,
        color: '#333',
        marginBottom: 8,
    },
    faultInput: {
        borderWidth: 1,
        borderColor: '#ddd',
        borderRadius: 8,
        padding: 12,
        fontSize: 16,
        color: '#333',
        minHeight: 44,
        textAlignVertical: 'top',
    },
    modalButtonContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 20,
        paddingTop: 10,
        borderTopWidth: 1,
        borderTopColor: '#eee',
        backgroundColor: '#fff',
    },
    cancelButton: {
        flex: 1,
        paddingVertical: 12,
        paddingHorizontal: 20,
        borderWidth: 1,
        borderColor: '#007AFF',
        borderRadius: 8,
        marginRight: 10,
        alignItems: 'center',
    },
    cancelButtonText: {
        fontSize: 16,
        color: '#007AFF',
    },
    // 用于模态框的确认按钮
    confirmButton: {
        flex: 1,
        paddingVertical: 12,
        paddingHorizontal: 20,
        backgroundColor: '#007AFF',
        borderRadius: 8,
        marginLeft: 10,
        alignItems: 'center',
    },
    confirmButtonText: {
        fontSize: 16,
        color: '#fff',
    },
    // 用于底部卡片的确认按钮（小按钮）
    confirmButtonSmall: {
        backgroundColor: '#007AFF',
        borderRadius: 6,
        paddingVertical: 8,
        paddingHorizontal: 16,
    },
    confirmButtonTextSmall: {
        color: '#fff',
        fontSize: 14,
        fontWeight: '500',
    },
    arrowIcon: {
        width: 16,
        height: 16,
        marginLeft: 5,
    },
    clearButton: {
        justifyContent: 'center',
        alignItems: 'center',
        width: 40,
        height: 40,
        paddingHorizontal: 8,
    },
    clearButtonText: {
        color: '#999',
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'center',
    },
    modalClearButton: {
        justifyContent: 'center',
        alignItems: 'center',
        width: 30,
        height: 30,
        paddingHorizontal: 5,
    },
    modalClearButtonText: {
        color: '#999',
        fontSize: 16,
        fontWeight: 'bold',
        textAlign: 'center',
    },
    clearButtonText1: {
        color: '#999',
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'center',
        textAlignVertical: 'center',
        lineHeight: 50,
        includeFontPadding: false,
        paddingTop: 0,
        paddingBottom: 0,
    },
}); 